
<!DOCTYPE html>
<html lang="zh-CN" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Games104第7节记录 - 浪子之心</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Blog,"> 
    <meta name="description" content="MrChen Bolg,环境光遮蔽(Ambient Occasion)
预计算AO采用光线追踪离线计算AO，并将结果存储到纹理中，这种方法广泛应用于物体建模过程中：

额外的仓储成本
仅适用于静态对象屏幕空间环境遮挡
在视,"> 
    <meta name="author" content="Jack Chen"> 
    <link rel="alternative" href="atom.xml" title="浪子之心" type="application/atom+xml"> 
    <link rel="icon" href="/blog/img/favicon.png"> 
    
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

    
<link rel="stylesheet" href="/blog/css/diaspora.css">

<meta name="generator" content="Hexo 5.4.1"><link rel="stylesheet" href="/blog/css/prism.css" type="text/css"></head>

<body class="loading">
    <span id="config-title" style="display:none">浪子之心</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://mrchenlearnspace.github.io/blog"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">Games104第7节记录</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">Games104第7节记录</h1>
        <div class="stuff">
            <span>四月 18, 2022</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/blog/tags/%E5%BC%95%E6%93%8E%E5%88%B6%E4%BD%9C/" rel="tag">引擎制作</a></li></ul>


        </div>
        <div class="content markdown">
            <h1 id="环境光遮蔽-Ambient-Occasion"><a href="#环境光遮蔽-Ambient-Occasion" class="headerlink" title="环境光遮蔽(Ambient Occasion)"></a>环境光遮蔽(Ambient Occasion)</h1><p><img src="https://img-blog.csdnimg.cn/25497739fd2c430fae63e9c0192b6234.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h2 id="预计算AO"><a href="#预计算AO" class="headerlink" title="预计算AO"></a>预计算AO</h2><p>采用光线追踪离线计算AO，并将结果存储到纹理中，这种方法广泛应用于物体建模过程中：</p>
<ol>
<li>额外的仓储成本</li>
<li>仅适用于静态对象<br><img src="https://img-blog.csdnimg.cn/91d8714a28b7428c963f92a76f7e854f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="屏幕空间环境遮挡"><a href="#屏幕空间环境遮挡" class="headerlink" title="屏幕空间环境遮挡"></a>屏幕空间环境遮挡</h2></li>
<li>在视空间中每个像素p周围的球体中生成N个随机样本</li>
<li>通过比较深度与深度缓冲来测试样本闭塞</li>
<li>样本点的平均可见性来近似AO<br><img src="https://img-blog.csdnimg.cn/dd1c6131d69b4539aa3452e12a467af3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="SSAO"><a href="#SSAO" class="headerlink" title="SSAO+"></a>SSAO+</h2>回想一下AO方程实际上是在法向半球上做的<br><img src="https://img-blog.csdnimg.cn/8c2c90658c464a84b73167374cb2973a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="HBAO-Horizon-based-Ambient-Occlusion"><a href="#HBAO-Horizon-based-Ambient-Occlusion" class="headerlink" title="HBAO Horizon-based Ambient Occlusion"></a>HBAO Horizon-based Ambient Occlusion</h2>使用深度缓冲作为高度场<br>在水平角以下的2D表面射线被遮挡<br><img src="https://img-blog.csdnimg.cn/554096e301f54e76989ddc0984873d8d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></li>
<li>使用深度缓冲区作为2D表面上的高度场</li>
<li>从水平角直接在2D和近似AO中跟踪射线<br><img src="https://img-blog.csdnimg.cn/a440fac09190446d88d967ab96d47ee8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="GTAO-Ground-Truth-based-Ambient-Occlusion"><a href="#GTAO-Ground-Truth-based-Ambient-Occlusion" class="headerlink" title="GTAO Ground Truth-based Ambient Occlusion"></a>GTAO Ground Truth-based Ambient Occlusion</h2>GTAO引入了缺失余弦因子，消除了衰减函数，并增加了多跳的快速逼近<br><img src="https://img-blog.csdnimg.cn/362bb3fe599b4bcaa5ea1360c804adfc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/5153c9a6b13b4c8f93c46a722de61109.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Ray-Tracing-Ambient-Occlusion"><a href="#Ray-Tracing-Ambient-Occlusion" class="headerlink" title="Ray-Tracing Ambient Occlusion"></a>Ray-Tracing Ambient Occlusion</h2>使用RTT硬件从每个屏幕像素投射光线<br>1 spp(每像素样本)对远场遮挡效果很好<br>用2-4 spp，可以恢复接触区域的详细闭塞<br><img src="https://img-blog.csdnimg.cn/978c78d71f1d46afabecc8b3010603b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h1 id="fog"><a href="#fog" class="headerlink" title="fog"></a>fog</h1><img src="https://img-blog.csdnimg.cn/f4a3fc3b53214eedab2eb1fd5991ca22.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="high-fog"><a href="#high-fog" class="headerlink" title="high fog"></a>high fog</h2><img src="https://img-blog.csdnimg.cn/57afe1dec66f4d09907d9622965a6dc9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Voxel-based-Volumetric-Fog基于体素化的雾"><a href="#Voxel-based-Volumetric-Fog基于体素化的雾" class="headerlink" title="Voxel-based Volumetric Fog基于体素化的雾"></a>Voxel-based Volumetric Fog基于体素化的雾</h2><img src="https://img-blog.csdnimg.cn/d978ccea3d334dc685cc04f48ab16f16.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h1 id="反走样-Anti-aliasing"><a href="#反走样-Anti-aliasing" class="headerlink" title="反走样 Anti-aliasing"></a>反走样 Anti-aliasing</h1><h2 id="反走样的原因"><a href="#反走样的原因" class="headerlink" title="反走样的原因"></a>反走样的原因</h2>混叠是由高频信号与高频信号产生的一系列图像伪影。有限的渲染分辨率的采样不足<img src="https://img-blog.csdnimg.cn/1233c40b79d14bafb15336412c5494b1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2>基于屏幕的抗锯齿方案的一般策略是使用抽样模式获得更多的样本，然后加权和样本相加产生像素颜色<br><img src="https://img-blog.csdnimg.cn/446246fe04bf424d8c6b28c8bf863275.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Super-sample-AA-SSAA-and-Multi-sample-AA-MSAA"><a href="#Super-sample-AA-SSAA-and-Multi-sample-AA-MSAA" class="headerlink" title="Super-sample AA (SSAA) and Multi-sample AA (MSAA)"></a>Super-sample AA (SSAA) and Multi-sample AA (MSAA)</h2><img src="https://img-blog.csdnimg.cn/9941e98336d244aba3ea71333c0832f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="FXAA-Fast-Approximate-Anti-aliasing"><a href="#FXAA-Fast-Approximate-Anti-aliasing" class="headerlink" title="FXAA (Fast Approximate Anti-aliasing)"></a>FXAA (Fast Approximate Anti-aliasing)</h2>基于1x渲染图像的抗锯齿．<br>根据亮度找到边缘像素<br>计算每个边缘像素的偏移量．<br>重新采样边缘像素的偏移量与邻居混合<br><img src="https://img-blog.csdnimg.cn/9ec04444a29c44898830afa18d7a2975.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/43fa97ef25c948a78de2e1c54b01e023.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/68d5ce1ee75a4efa8c5188e85dd0549c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br>Blend Nearby Pixels<br><img src="https://img-blog.csdnimg.cn/e14713690b41467aa516176f578e9442.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="TAA-Temporal-Anti-aliasing"><a href="#TAA-Temporal-Anti-aliasing" class="headerlink" title="TAA (Temporal Anti-aliasing)"></a>TAA (Temporal Anti-aliasing)</h2>利用时空滤波方法提高机管局运动稳定性<br><img src="https://img-blog.csdnimg.cn/828e4a38111140a396950dd1580e1300.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h1 id="Post-process"><a href="#Post-process" class="headerlink" title="Post-process"></a>Post-process</h1>在3D图形中，后处理是指将应用于最终图像的任何算法。这可以是出于风格上的原因(色彩校正、对比等)，也可以是出于现实原因(色调映射、景深等)。<br><img src="https://img-blog.csdnimg.cn/b58634d980a94625a3ce7bd5c725d53c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Bloom"><a href="#Bloom" class="headerlink" title="Bloom"></a>Bloom</h2><img src="https://img-blog.csdnimg.cn/2471e71edfb24440917d9cd803b1cc5a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h3 id="Detect-Bright-Area-by-Threshold"><a href="#Detect-Bright-Area-by-Threshold" class="headerlink" title="Detect Bright Area by Threshold"></a>Detect Bright Area by Threshold</h3><img src="https://img-blog.csdnimg.cn/b70e8321822e4a8681200db64f17e995.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/1d3f717cfbee4b5e8f9626e83704f0e0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/c639aa87c64f44faa20d3c6151b58840.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></li>
</ol>
<h2 id="Tone-Mapping"><a href="#Tone-Mapping" class="headerlink" title="Tone Mapping"></a>Tone Mapping</h2><ol>
<li>没有办法在SDR设备中直接显示HDR图像</li>
<li>色调映射功能的目的是将宽范围的高动态范围(HDR)颜色映射到显示器可以输出的标准动态范围(SDR)<br><img src="https://img-blog.csdnimg.cn/5cd07ddc05b94031b7f6ce0fae191dd8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h3 id="Tone-Mapping-Curve"><a href="#Tone-Mapping-Curve" class="headerlink" title="Tone Mapping Curve"></a>Tone Mapping Curve</h3><img src="https://img-blog.csdnimg.cn/6183249d49e44eb0833d538867f592f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h3 id="ACES"><a href="#ACES" class="headerlink" title="ACES"></a>ACES</h3></li>
</ol>
<p><strong>学院色彩编码系统</strong></p>
<ol>
<li>主要用于电影和动画</li>
<li>有趣的范例和转换</li>
</ol>
<p><strong>有用的部分</strong></p>
<ol>
<li>在HDR中应用颜色分级是好的</li>
<li>将一个固定的管道连接到最终的OTD转换阶段的想法是好的</li>
<li>将艺术意图与支持不同设备的机制分离开来<br><img src="https://img-blog.csdnimg.cn/56d831ec988a437796f4d257660936ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h3 id="HDR-and-SDR-Pipeline"><a href="#HDR-and-SDR-Pipeline" class="headerlink" title="HDR and SDR Pipeline"></a>HDR and SDR Pipeline</h3>HDR &#x2F; SDR之间的视觉一致性<br>之前的SDR颜色管道相似的SDR结果<br>高质量<br>高性能<br>对美术团队的干扰最小<br>从当前的颜色管道简单<br>过渡掌握HDR和SDR所需的额外开销最小<br><img src="https://img-blog.csdnimg.cn/be1f508f06d44451ac93c2060215f129.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/4609a63144d5421987609d1e6098fa34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></li>
</ol>
<h2 id="Color-Grading"><a href="#Color-Grading" class="headerlink" title="Color Grading"></a>Color Grading</h2><h3 id="Lookup-Table-LUT"><a href="#Lookup-Table-LUT" class="headerlink" title="Lookup Table (LUT)"></a>Lookup Table (LUT)</h3><ol>
<li>LUT用于根据LUT中包含的数据将源像素的输入颜色值重新映射为新的输出值</li>
<li>LUT可以被认为是一种可以应用于图像或镜头的颜色预设<br><img src="https://img-blog.csdnimg.cn/6b746c2cb526490b856808499d3510e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/8f694b7cc7be46d4afc28d18a66ecd4c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/208f87f769564030b9d18c7cb5d6e35d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h1 id="渲染管线"><a href="#渲染管线" class="headerlink" title="渲染管线"></a>渲染管线</h1>渲染管道是所有渲染操作执行和资源分配的管理顺序<br><img src="https://img-blog.csdnimg.cn/b6dbf9be4def44b7bd1fc192982bfdcb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Forward-Rendering"><a href="#Forward-Rendering" class="headerlink" title="Forward Rendering"></a>Forward Rendering</h2><img src="https://img-blog.csdnimg.cn/7c2f767d52a74b9a8d32dfded11873df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/e58c13f1642f4d61884d5c165a45363d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/6f26a4edecef490382256569bbc6ff1b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h2 id="Deferred-Rendering"><a href="#Deferred-Rendering" class="headerlink" title="Deferred Rendering"></a>Deferred Rendering</h2><img src="https://img-blog.csdnimg.cn/139528b58e2749f283fcd9fc1093a91c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3>光照只计算可见的片段<br>G-Buffer的数据可以用于后处理<h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3>高内存和带宽成本<br>不支持透明对象<br>对MSAA不友好<br><img src="https://img-blog.csdnimg.cn/a0639caf4e384b1aaa9c99feb4429e88.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/14459a460848487383de48f943d92d8f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/e0358d66ba174c999c8f385463ef4800.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/7a62db1b62514bbcb3172424dff97912.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br>前进+(基于贴图的前进)渲染<br>深度预压(防止透支&#x2F;提供瓷砖深度范围)<br>平铺光照剔除(输出:每个平铺的光照列表)<br>每个物体的阴影(PS:通过光剔除计算的光列表迭代)<br><img src="https://img-blog.csdnimg.cn/e02f693d4757465f889b66736226c4df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/dbce402f97e147f9a0d9d578bc68169f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/10829f8a13e44100a1371c3d8a675de9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h3 id="挑战"><a href="#挑战" class="headerlink" title="挑战"></a>挑战</h3><p>复杂的并行工作需要与复杂的资源依赖性同步<br>大量生命周期小于一帧的瞬态资源<br>复杂资源状态管理<br>不需要大量的用户低级知识，就可以利用新暴露的GPU特性<br><img src="https://img-blog.csdnimg.cn/dc6bd3415cb7419c84c3dad4cd9169a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/e80ed436995d4a5581197412eb64b1ea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h1 id="屏幕撕裂"><a href="#屏幕撕裂" class="headerlink" title="屏幕撕裂"></a>屏幕撕裂</h1><p><img src="https://img-blog.csdnimg.cn/ac66e2ee58dd43b4b3be6d1690f0a69a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h2 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h2><p>在大多数游戏中，你的GPU帧率是非常不稳定的当新的GPU帧在最后一帧的中间更新时，屏幕撕裂发生<br><img src="https://img-blog.csdnimg.cn/b23946d58b334a83ad5070157a89dcfc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>v-Sync Technology<br>用垂直刷新同步缓冲区交换称为V-syncV-Sync可以用来防止撕裂，但帧率降低，鼠标延迟和口吃破坏游戏<br><img src="https://img-blog.csdnimg.cn/8d437ae2af5944d6abe3bec740450410.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/a0e4175b56b74b078db9c34906887d9d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="/music/jucilang.mp3">
            </audio>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='true'
        data-ae='true'
        data-ci='99f95a936c6fcdb1bd67'
        data-cs='c2d1bba3d6b7f9ade4f3de09a63925bd837c25ea'
        data-r='mrchenlearnspace.github.io'
        data-o='MrChenLearnSpace'
        data-a='MrChenLearnSpace'
        data-d='false'
    >查看评论</div>


    </div>
    
        <div class='side'>
			<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83%E5%85%89%E9%81%AE%E8%94%BD-Ambient-Occasion"><span class="toc-number">1.</span> <span class="toc-text">环境光遮蔽(Ambient Occasion)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A2%84%E8%AE%A1%E7%AE%97AO"><span class="toc-number">1.1.</span> <span class="toc-text">预计算AO</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%8F%E5%B9%95%E7%A9%BA%E9%97%B4%E7%8E%AF%E5%A2%83%E9%81%AE%E6%8C%A1"><span class="toc-number">1.2.</span> <span class="toc-text">屏幕空间环境遮挡</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SSAO"><span class="toc-number">1.3.</span> <span class="toc-text">SSAO+</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HBAO-Horizon-based-Ambient-Occlusion"><span class="toc-number">1.4.</span> <span class="toc-text">HBAO Horizon-based Ambient Occlusion</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GTAO-Ground-Truth-based-Ambient-Occlusion"><span class="toc-number">1.5.</span> <span class="toc-text">GTAO Ground Truth-based Ambient Occlusion</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ray-Tracing-Ambient-Occlusion"><span class="toc-number">1.6.</span> <span class="toc-text">Ray-Tracing Ambient Occlusion</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#fog"><span class="toc-number">2.</span> <span class="toc-text">fog</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#high-fog"><span class="toc-number">2.1.</span> <span class="toc-text">high fog</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Voxel-based-Volumetric-Fog%E5%9F%BA%E4%BA%8E%E4%BD%93%E7%B4%A0%E5%8C%96%E7%9A%84%E9%9B%BE"><span class="toc-number">2.2.</span> <span class="toc-text">Voxel-based Volumetric Fog基于体素化的雾</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%8D%E8%B5%B0%E6%A0%B7-Anti-aliasing"><span class="toc-number">3.</span> <span class="toc-text">反走样 Anti-aliasing</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%8D%E8%B5%B0%E6%A0%B7%E7%9A%84%E5%8E%9F%E5%9B%A0"><span class="toc-number">3.1.</span> <span class="toc-text">反走样的原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">3.2.</span> <span class="toc-text">解决方案</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Super-sample-AA-SSAA-and-Multi-sample-AA-MSAA"><span class="toc-number">3.3.</span> <span class="toc-text">Super-sample AA (SSAA) and Multi-sample AA (MSAA)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#FXAA-Fast-Approximate-Anti-aliasing"><span class="toc-number">3.4.</span> <span class="toc-text">FXAA (Fast Approximate Anti-aliasing)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TAA-Temporal-Anti-aliasing"><span class="toc-number">3.5.</span> <span class="toc-text">TAA (Temporal Anti-aliasing)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Post-process"><span class="toc-number">4.</span> <span class="toc-text">Post-process</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Bloom"><span class="toc-number">4.1.</span> <span class="toc-text">Bloom</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Detect-Bright-Area-by-Threshold"><span class="toc-number">4.1.1.</span> <span class="toc-text">Detect Bright Area by Threshold</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Tone-Mapping"><span class="toc-number">4.2.</span> <span class="toc-text">Tone Mapping</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Tone-Mapping-Curve"><span class="toc-number">4.2.1.</span> <span class="toc-text">Tone Mapping Curve</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ACES"><span class="toc-number">4.2.2.</span> <span class="toc-text">ACES</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HDR-and-SDR-Pipeline"><span class="toc-number">4.2.3.</span> <span class="toc-text">HDR and SDR Pipeline</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Color-Grading"><span class="toc-number">4.3.</span> <span class="toc-text">Color Grading</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Lookup-Table-LUT"><span class="toc-number">4.3.1.</span> <span class="toc-text">Lookup Table (LUT)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E7%AE%A1%E7%BA%BF"><span class="toc-number">5.</span> <span class="toc-text">渲染管线</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Forward-Rendering"><span class="toc-number">5.1.</span> <span class="toc-text">Forward Rendering</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Deferred-Rendering"><span class="toc-number">5.2.</span> <span class="toc-text">Deferred Rendering</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E7%82%B9"><span class="toc-number">5.2.1.</span> <span class="toc-text">优点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%BA%E7%82%B9"><span class="toc-number">5.2.2.</span> <span class="toc-text">缺点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%91%E6%88%98"><span class="toc-number">5.2.3.</span> <span class="toc-text">挑战</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B1%8F%E5%B9%95%E6%92%95%E8%A3%82"><span class="toc-number">6.</span> <span class="toc-text">屏幕撕裂</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9B%A0"><span class="toc-number">6.1.</span> <span class="toc-text">原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-number">6.2.</span> <span class="toc-text">解决方法</span></a></li></ol></li></ol>	
        </div>
    
</div>


    </div>
</div>
</body>

<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/blog/js/plugin.js"></script>
<script src="/blog/js/typed.js"></script>
<script src="/blog/js/diaspora.js"></script>


<link rel="stylesheet" href="/blog/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/blog/photoswipe/default-skin/default-skin.css">


<script src="/blog/photoswipe/photoswipe.min.js"></script>
<script src="/blog/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



<script type="text/x-mathjax-config">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>



<!-- Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YMJ8CBH8F7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YMJ8CBH8F7');
</script>
<!-- End Google Analytics -->


</html>
